<template>
	<view class="home">
		<!-- S 顶部栏 -->
		<sol-navbar :is-back="false">
			<template v-slot:default>
				<view class="home-naver__left">
					<text class="home-naver__left-zh">八月廿五</text>
					<text class="home-naver__left-en">Tuesday</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="home-naver__right" @click="fnAbyssEvent('open')">
					<text class="home-naver__right-text">深渊</text>
					<image class="home-naver__right-icon" src="/static/icon-default/icon_abyss_out.png"
						mode="scaleToFill">
					</image>
				</view>
			</template>
		</sol-navbar>
		<!-- E 顶部栏 -->

		<!-- S 没登录用户只展示10条数据 -->
		<template v-if="isTourist">
			<!-- S 卡片列表 -->
			<view class="home-list">
				<dynamic-list-item v-for="dynaminc in dynamicList" :key="dynaminc.id" :info="dynaminc"
					@click="fnDynamincEvent">
				</dynamic-list-item>
			</view>
			<!-- E 卡片列表 -->
		</template>
		<!-- E 没登录用户只展示10条数据-->

		<!-- S 登录用户没发布过提示 -->
		<template v-if="!isTourist && !isPublish">
			<view class="home-no">
				<sol-image class="home-no_icon" widht="200rpx" height="200rpx" src="/static/icon-default/icon_logo.png">
				</sol-image>
				<text class="home-no_title">为什么没有内容？</text>
				<text class="home-no_text">发表你的动态内容后，系统会将你设置为引子，从而牵引出过去5小时前的内容。普通用户一天可以发表两次内容，会员可额外增加三次。</text>
				<button class="home-no_btn" @click="fnNavigateToEvent('dynamic_publish')">现在去编写内容</button>
			</view>
		</template>
		<!-- E 登录用户没发布过提示 -->

		<!-- S 登录用户发表过动态显示内容 -->
		<template v-if="!isTourist && isPublish">
			<!-- S 横向滚动用户 -->
			<scroll-view class="home-scroll_bar" :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true"
				:enable-flex="true" @scrolltolower="fnTabUserEvent('lower')">
				<view class="home-scroll_bar-item" v-for="user in tabUserList" :key="user.uid"
					@click="fnTabUserEvent('user', user.uid)">
					<sol-avatar :src="user.avatar" :gender="user.gender" :size="90"></sol-avatar>
					<text class="home-scroll_bar-item_text line-1" v-text="user.nickname">昵称</text>
				</view>
			</scroll-view>
			<!-- E 横向滚动用户 -->

			<!-- S 卡片列表 -->
			<view class="home-list">
				<dynamic-list-item v-for="dynaminc in dynamicList" :key="dynaminc.id" :info="dynaminc"
					@click="fnDynamincEvent">
				</dynamic-list-item>
			</view>
			<!-- E 卡片列表 -->

			<!-- S 弹出查看更多人物 -->
			<sol-drawer v-model="tabUserDrawer" primary-text="开通会员" cancel-text="取消" @click="fnTabUserEvent">
				<template v-slot:default>
					<view class="tip-drawer">
						<image class="tip-drawer_icon" src="/static/icon-default/icon_tab_user.png" mode="scaleToFill">
							<view class="tip-drawer_title">查看更多人物</view>
							<view class="tip-drawer_text">
								仅会员可查看更多的人物，普通会员可浏览10个时段人物，开通会员后提升到30个人物。
							</view>
					</view>
				</template>
			</sol-drawer>
			<!-- E 弹出查看更多人物 -->
		</template>
		<!-- E 登录用户发表过动态显示内容 -->

		<!-- S 弹出深渊模式确认 -->
		<sol-drawer v-model="abyssDrawer" primary-text="确认开启" cancel-text="取消" @click="fnAbyssEvent">
			<template v-slot:default>
				<view class="tip-drawer">
					<image class="tip-drawer_icon" src="/static/icon-default/icon_abyss.png" mode="scaleToFill">
						<view class="tip-drawer_title">深渊模式</view>
						<view class="tip-drawer_text">
							在该模式下，显示的内容动态和人物会压缩和拉长，即你可以精确看到过去3小时前的内容和人物以及后未来6小时内的内容和人物，牵引点为你发表内容的时间段。
						</view>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出深渊模式确认 -->

		<!-- 底部导航 S -->
		<sol-tabbar :show-text="false" :list="vuex_tabbar"></sol-tabbar>
		<!-- 底部导航 E -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: "TabbarHome",
		data() {
			return {
				// 用户推荐
				tabUserList: Array.from({
					length: 10
				}, (v, i) => v = {
					uid: i + 2,
					gender: i % 2 + 2,
					nickname: ['花笙米', '繁星皓月'][i % 2],
					avatar: 'https://dummyimage.com/200x200',
				}),
				// 动态列表
				dynamicList: Array.from({
					length: 32
				}, (v, i) => v = {
					id: i + 12,
					publishTime: i == 4 ? '移动的聊天室' : `18时${i+10}分`,
					publishState: i == 4 ? 'chat' : ["weather-night", "weather-rainy"][i % 2],
					content: i == 4 ? "失眠治疗室 · 82 人聊天中" : "多数事并不如你想的那样一帆风顺，但你却因此成为了可以乘风破浪的人。",
					user: {
						uid: i + 1,
						nickname: '凉凉',
						avatar: 'https://dummyimage.com/200x200',
					},
					imgs: i == 4 || i == 8 ? [] : ['https://dummyimage.com/200x200',
						'https://dummyimage.com/200x200', '/static/icon-default/icon_logo.png', ,
						'/static/icon-default/icon_logo.png'
					].slice(0, i % 5),
					lifeTime: i + "小时",
					lifeState: "time-" + (i % 6 + 1),
					commentCount: Math.random().toString().slice(-3),
					audioTime: i == 8 ? 46 : 0,
					audioSrc: i == 8 ? '/staic/88s.aco' : null,
					type: i == 4 ? 'chat' : 'dynamic',
					users: i == 4 ? Array.from({
						length: 5
					}, (v, i) => v = {
						uid: i + 2,
						gender: i % 2 + 2,
						nickname: ['花笙米', '繁星皓月'][i % 2],
						avatar: 'https://dummyimage.com/200x200',
					}) : [],
				}),
				// 弹出横向滚动用户-查看更多用户
				tabUserDrawer: false,
				// 弹出深渊模式确认
				abyssDrawer: false,
				// 最近5个小时内是否发表过
				isPublish: false,
				// 只是游客
				isTourist: false,
			};
		},
		computed: {
			...mapState(['vuex_tabbar', 'vuex_form_data']),
		},
		created() {},
		mounted() {
			console.log(typeof this.vuex_tabbar);
		},
		onShow() {
			// 回显判断,临时变量演示用
			this.isPublish = this.vuex_form_data.isPublish;
			this.isTourist = this.vuex_form_data.isTourist;
		},
		methods: {
			// 用户推荐点击
			fnTabUserEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'lower': // 滚到右 弹出查看更多人物
						if (this.tabUserList.length >= 30) return 0;
						this.tabUserDrawer = true;
						this.tabUserList = this.tabUserList.concat(Array.from({
							length: 10
						}, (v, i) => v = {
							uid: Math.random().toString().slice(-i + 10),
							gender: i % 2 + 2,
							nickname: ['花笙米', '繁星皓月'][i % 2],
							avatar: 'https://dummyimage.com/200x200',
						}));
						break;
					case 'user': // 点击用户
						uni.navigateTo({
							url: '/pages/user/info/info'
						})
						break;
					case 'primary': // 弹出点击开通
						uni.navigateTo({
							url: '/pages/user/open-vip/open-vip'
						})
						break;
					case 'mask': // 弹出点击遮罩
					case 'cancel': // 弹出点击取消
						this.tabUserDrawer = false;
						break;
				}
			},
			// 深渊模式事件
			fnAbyssEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.abyssDrawer = true;
						break;
					case 'primary': // 弹出点击开通
						uni.navigateTo({
							url: '/pages/user/open-vip/open-vip'
						})
						break;
					case 'mask': // 弹出点击遮罩
					case 'cancel': // 弹出点击取消
						this.abyssDrawer = false;
						break;
				}
			},
			// 动态项事件
			fnDynamincEvent(data = {}) {
				this.$log(this.$options.name, data);
				switch (data.type) {
					case 'more':
						break;
					case "content":
						if (this.isTourist) {
							this.fnNavigateToEvent('login');
						} else {
							this.fnNavigateToEvent('dynamic_detail', {
								a: 1
							});
						}
						break;
				}
			},
			// 跳转事件
			fnNavigateToEvent(to = '', data = {}) {
				this.$log(this.$options.name, to);
				let url = null;
				switch (to) {
					case 'dynamic_publish': // 发布动态页面
						url = '/pages/dynamic/publish/publish';
						break;
					case 'dynamic_detail': // 动态详情页面
						url = '/pages/dynamic/details/details';
						break;
					case 'login': // 登录页面
						url = '/pages/account/login/login';
						break;
				}
				if (!url) return;
				this.$navigateTo(url, data);
			}
		},
	}
</script>

<style lang="scss">
	.home {
		background-color: $--color-background;
		min-height: 90vh;
		padding-bottom: 112rpx;
		padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
		overflow: hidden;

		// 顶部栏
		&-naver {
			&__left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				margin-left: 28rpx;

				&-zh {
					font-size: 32rpx;
					font-weight: bold;
					color: #DDDDDD;
				}

				&-en {
					font-size: 24rpx;
					font-weight: 400;
					color: #BBBBBB;
				}
			}

			&__right {
				width: 156rpx;
				height: 56rpx;
				background-color: #474e54;
				border-radius: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 28rpx;

				&-text {
					font-size: 32rpx;
					font-weight: 400;
					color: #DDDDDD;
				}

				&-icon {
					width: 42rpx;
					height: 36rpx;
					display: block;
					margin-left: 12rpx;
				}
			}
		}

		// 横向滚动用户
		&-scroll_bar {
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			flex-wrap: nowrap;
			width: 90%;
			height: 142rpx;
			overflow: hidden;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 28rpx 36rpx;

			&-item {
				display: inline-flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin-right: 48rpx;
				height: 142rpx;

				&_text {
					margin-top: 18rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #DDDDDD;
					width: 112rpx;
					text-align: center;
				}
			}
		}

		// 动态列表
		&-list {
			padding: 0 28rpx;
		}

		// 为什么没有内容
		&-no {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			padding-top: 64rpx;

			&_icon {
				width: 200rpx !important;
				height: 200rpx !important;
				display: block;
				border-radius: 50%;
				overflow: hidden;
			}

			&_title {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 6rpx;
				padding: 56rpx 0;
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #BBBBBB;
				line-height: 48rpx;
				padding: 0 28rpx 128rpx;
			}

			&_btn {
				height: 90rpx;
				border-radius: 90rpx;
				line-height: 90rpx;
				letter-spacing: 4rpx;
				font-size: 32rpx;
				width: 424rpx;
				background-color: #607d8b;
				color: #DDDDDD;
			}
		}

		// 弹出查看更多人物/弹出深渊模式确认
		.tip-drawer {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			&_icon {
				width: 144rpx;
				height: 144rpx;
			}

			&_title {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				margin: 28rpx 0;
				letter-spacing: 6rpx;
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #BBBBBB;
				overflow: hidden;
				letter-spacing: 4rpx;
			}
		}

	}
</style>
